<template>
	<!-- 提交订单后回显 预约页 -->
	<view>
		<view class="content">
			<pro-gress :list="Steps" :StepInfo='StepInfo'></pro-gress>
		</view>

		<view class="container">

			<view class="box">
				<view>
					<view class="gudingtxt">订单咨询</view>
				</view>
			</view>
			<view class="fenjie"></view>

			<view class="box">
				<view>
					<view class="jibing">订单类型:在线咨询</view>
				</view>
				<view>
					<view class="jibing">订单号:{{list.ordersId}}</view>
				</view>
				<view>
					<view class="jibing">订单时间:{{list.createTime}}</view>
				</view>
			</view>

			<view class="box">
				<view>
					<view class="gudingtxt">服务医生</view>
				</view>
			</view>
			<view class="fenjie"></view>

			<view class="botsny">
				<image class="logo-img" :src="doctor.doctorPto"></image>
				<view class="box">
					<view>
						<view view class="leftys">
							{{doctor.doctorName}}&ensp;&ensp;&ensp;&ensp;&ensp;
							{{doctor.doctorVariety==0 ?'兽医':'农医'}}
						</view>
					</view>
					<view>
						<view class="yiyuan">{{hospital.hospitalName}}</view>
					</view>
				</view>
			</view>

			<view class="box">
				<view>
					<view class="gudingtxt">患者资料</view>
				</view>
			</view>
			<view class="fenjie"></view>

			<view class="box">
				<view>
					<view class="jibing">病情信息:{{list.category==0 ?'植物':'动物'}} {{list.startTime}}</view>
				</view>
				<view>
					<view class="jibing">病情描述:{{list.description}}</view>
				</view>
				<view>
					<!-- <view class="jibing">病情照片:照片</view> -->
					<image class="xs-img" :src="list.img" @tap="_prev(list.img)"></image>
				</view>
			</view>


		</view>

		<view>
			<view class="shijian">23:58</view>
		</view>

		<view>
			<button class="butt-tj" @tap="showFun">立即支付</button>
			<pay-keyboard :show_key="show_key" @hideFun="hideFun" @getPassword="getPassword"></pay-keyboard>
		</view>

	</view>
</template>

<script>
	import proGress from '@/common/progress.vue'
	import payKeyboard from '../../components/keyboard.vue'
	export default {
		components: {
			proGress,
			payKeyboard
		},
		data() {
			return {
				title: 'Hello',
				show_key: false,
				Steps: [],
				StepInfo: {},
				list: {
					ordersId: '',
					createTime: '',
					category: '',
					description: '',
					starttime: '',
					img: '',
					customerId: ''


				},
				doctor: {
					doctorName: '',
					doctorVariety: '',
					doctorPto: ''
				},
				hospital: {
					hospitalName: ''
				}
			}
		},
		onLoad() {
			setTimeout(res => {
				this.Steps = ['发起咨询', '支付', '咨询', '评价'],
					this.StepInfo = {
						Current: 35, //百分比
						Sum: 4 //共多少步骤
					}
			}, 100)
		},
		onLoad: function(option) {
			this.ordersId = option.ordersId
			uni.request({
				url: 'http://localhost:8099/serviceedu/orders/findByIdOrders/' + this.ordersId,
				method: 'Get',
				success: (res) => {
					console.log(res.data)
					this.list = res.data

					uni.request({
						url: 'http://localhost:8099/serviceedu/doctor/findById/' + res.data
							.doctorId,
						method: 'GET',
						success: (res) => {
							console.log(res.data.data.list)
							this.doctor = res.data.data.list

							//查询医院
							uni.request({
								url: 'http://localhost:8099/serviceedu/hospital/findById/' +
									res.data.data.list.hospitalId,
								method: 'GET',
								success: (res) => {
									console.log(res.data.data.list)

									this.hospital = res.data.data.list
								}
							})

						}
					})
				}
			})
		},
		methods: {
			addtj() {
				uni.reLaunch({
					url: './zixun'
				})
			},
			showFun() {
				this.show_key = true

			},
			hideFun() {
				this.show_key = false
			},
			getPassword(n) {
				const value = uni.getStorageSync('pwd');

				uni.request({
					url: 'http://localhost:8099/serviceuser/information/shopPwd/' + value + '/' + this.list
						.customerId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						uni.removeStorageSync('pwd')

						uni.request({
							url: 'http://localhost:8099/serviceuser/information/shop/'+ this.list.ordersId,
							method: 'GET',
							success: (res) => {
								if(res.data.code==20000){
									
									//输入密码后跳转到
									uni.reLaunch({
										url: './zixun?ordersId='+this.list.ordersId,
									})
								}
								uni.reLaunch({
									url:'../index/index'
								})

							}
						})
					}
				})
			},
			//预览图片
			_prev(image){
				var imgArr=[];
				imgArr.push(image);
				
				uni.previewImage({
					urls:imgArr,
					current:imgArr[0]
				})
			}
		}
	}
</script>

<style>
	.content {
		padding-top: 20upx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #8bcbaf;
		height: 60px;
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.logo {
		height: 200rpx;
		width: 150rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	/* .title {
		font-size: 36rpx;
		color: #8f8f94;
	} */
	.container {
		/* 定义容器 */
		display: flex;
		/* 设置容器排列方向 */
		flex-direction: column;
		height: 100%;
		justify-content: space-around;
		/* background-color: #f0f0f0; */
	}

	.botsny {
		/* background-color: blue; */
		height: 70px;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin-bottom: 10rpx;
	}

	.logo-img {
		width: 130upx;
		height: 130upx;
		border-radius: 200upx;
		left: 50px;
		top: 15px;
	}

	.box {
		height: 50%;
		width: 70%;
		display: flex;
		flex-direction: column;
		/* margin-top: 20rpx; */
		margin-left: 70rpx;
	}

	.box>view {
		color: #000000;
		font-weight: bold;
		font-size: 30upx;
		flex: 1;
		height: 100upx;
		display: flex;
		margin-top: 10px;
		margin-top: 20rpx;
		align-items: center;
		/* justify-content: center; */
	}

	.button-yuanjiao {
		width: 170rpx;
		height: 50rpx;
		display: flex;
		margin-top: 30rpx;
		line-height: 50rpx;
		/* justify-content: center; */
		border-radius: 25px;
		background-color: #8bcbaf;
		font-size: 28rpx;
		color: #ffffff;

	}

	.leftys {
		font-size: 30upx;
		border-radius: 150upx;
		left: 100px;
		top: 30px;
		margin-left: 40px;
		margin-top: 10px;
		/* position: absolute; */
	}

	.yiyuan {
		font-size: 20upx;
		border-radius: 150upx;
		color: #7e7e7e;
		left: 100px;
		top: 55px;
		margin-left: 40px;
		margin-top: 8px;
		/* position: absolute; */
	}

	.wzl {
		font-size: 40upx;
		border-radius: 150upx;
		color: #0a7e0a;
		left: 100px;
		top: 70px;
		margin-left: 15px;
		align-items: center;
		/* position: absolute; */
	}

	.wzl1 {
		font-size: 20upx;
		border-radius: 150upx;
		left: 100px;
		top: 85px;
		align-items: center;
		margin-left: 20px;
		color: #b5b5b5;
		/* position: absolute; */
	}

	.wzl2 {
		font-size: 20upx;
		border-radius: 150upx;
		left: 100px;
		top: 85px;
		align-items: center;
		color: #b5b5b5;
	}

	.jibing {
		font-size: 20upx;
		border-radius: 150upx;
		left: 100px;
		align-items: center;
		margin-left: 30px;
	}

	.gudingtxt {
		margin-top: 20px;
		margin-left: 20px;
	}

	.zx {
		font-size: 20upx;
		border-radius: 150upx;
		left: 150px;
		top: 105px;
		/* position: absolute; */
		color: #0a7e0a;
	}

	.fenjie {
		background-color: #22cdd6;
		height: 3px;
		width: 80px;
		margin-left: 50px;
		margin-bottom: 10px;
	}

	.shijian {
		font-size: 25px;
		margin-top: 10%;
		margin-left: 40%;
		color: #8bcbaf;

	}

	.butt-tj {
		width: 60%;
		background-color: #8bcbaf;
		color: #ffffff;
		border-radius: 20upx;
	}

	.pay_btn {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		text {
			padding: 20rpx 30rpx;
			background: #007AFF;
			border-radius: 10rpx;
			font-size: 28rpx;
			color: #ffffff;
		}
	}
	
	.xs-img{
		margin-left: 30px;
		width: 180px;
		height: 130px;
	}
</style>
